<template>
  <div>
    <div class="header">
      <div class="pc-nav">
        <div class="nav">
          <div
            class="nav-item"
            :class="activeNavIndex === index ? 'active' : ''"
            v-for="(item, index) in navList"
            :key="item.id"
            @click="onclickNavItem(index)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="mobile-nav" ref="childMobileNavRef">
        <div
          class="active-nav"
          @click.stop="mobileNavVisible = !mobileNavVisible"
        >
          <span>{{ navList[activeNavIndex].title }}</span>
          <IconArrowRight2 class="arrow-right"></IconArrowRight2>
        </div>
        <div class="select-nav" :class="mobileNavVisible ? 'show' : ''">
          <div
            class="select-item"
            v-for="(item, index) in navList"
            @click.stop="onclickNavItem(index)"
            :key="item.id"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="pc-data">
      <div class="table">
        <div class="table-header">
          <div class="table-header-item col-1">
            {{ $t("table.profile_apply.col_1") }}
          </div>
          <div class="table-header-item col-2">
            {{ $t("table.profile_apply.col_2") }}
          </div>
          <div class="table-header-item flex-1">
            {{ $t("table.profile_apply.col_3") }}
          </div>
          <div class="table-header-item col-4">
            {{ $t("table.profile_apply.col_4") }}
          </div>
          <div class="table-header-item col-5">
            {{ $t("table.profile_apply.col_5") }}
          </div>
          <div class="table-header-item col-6">
            {{ $t("table.profile_apply.col_6") }}
          </div>
          <div class="table-header-item col-7">
            {{ $t("table.profile_apply.col_7") }}
          </div>
        </div>
        <div class="table-body" v-if="courseSubmitList">
          <template v-for="item in courseSubmitList" :key="item.id">
            <div class="table-row">
              <div class="table-row-item col-1">{{ item.id }}</div>
              <div class="table-row-item col-2" :title="item.order_number">
                {{ item.order_number }}
              </div>
              <div class="table-row-item flex-1">{{ item.course_title }}</div>
              <div class="table-row-item col-4">{{ item.create_time }}</div>
              <div class="table-row-item col-5">
                {{ item.last_name +' '+ item.first_name }}
              </div>
              <div class="table-row-item status col-6">
                <span
                  :class="
                    item.status == '1'
                      ? 'pre-pay'
                      : item.status == '2'
                      ? 'payed'
                      : item.status == '4'
                      ? 'complete'
                      : 'pre-pay'
                  "
                  >{{ item.status_title }}</span
                >
              </div>
              <div class="table-row-item col-7 table-row-col-end">
                <div class="btn" @click="showCourseSubmitItemView(item.id)">
                  <svg
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M11.6668 1.89136V5.33348C11.6668 5.80018 11.6668 6.03354 11.7577 6.2118C11.8376 6.3686 11.965 6.49608 12.1218 6.57598C12.3001 6.66681 12.5335 6.66681 13.0002 6.66681H16.4423M11.6668 14.1667H6.66683M13.3335 10.8334H6.66683M16.6668 8.3236V14.3334C16.6668 15.7335 16.6668 16.4336 16.3943 16.9684C16.1547 17.4388 15.7722 17.8212 15.3018 18.0609C14.767 18.3334 14.067 18.3334 12.6668 18.3334H7.3335C5.93336 18.3334 5.2333 18.3334 4.69852 18.0609C4.22811 17.8212 3.84566 17.4388 3.60598 16.9684C3.3335 16.4336 3.3335 15.7335 3.3335 14.3334V5.66675C3.3335 4.26662 3.3335 3.56655 3.60598 3.03177C3.84566 2.56137 4.22811 2.17892 4.69852 1.93923C5.2333 1.66675 5.93336 1.66675 7.3335 1.66675H10.01C10.6215 1.66675 10.9272 1.66675 11.2149 1.73582C11.47 1.79707 11.7139 1.89808 11.9375 2.03515C12.1898 2.18975 12.406 2.40594 12.8384 2.83832L15.4953 5.49517C15.9276 5.92755 16.1438 6.14374 16.2984 6.39604C16.4355 6.61972 16.5365 6.86358 16.5978 7.11867C16.6668 7.40639 16.6668 7.71213 16.6668 8.3236Z"
                      stroke="#36434D"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                  <span>{{ $t("btnText.detail") }}</span>
                </div>
                <template v-if="false">
                  <span v-if="item.status_title === '待支付'">|</span>
                  <div class="btn" v-if="item.status_title === '待支付'">
                    <svg
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13.75 11.6668H13.7583M2.5 4.16679V15.8335C2.5 16.7539 3.24619 17.5001 4.16667 17.5001H15.8333C16.7538 17.5001 17.5 16.7539 17.5 15.8335V7.50012C17.5 6.57965 16.7538 5.83346 15.8333 5.83346L4.16667 5.83346C3.24619 5.83346 2.5 5.08726 2.5 4.16679ZM2.5 4.16679C2.5 3.24631 3.24619 2.50012 4.16667 2.50012H14.1667M14.1667 11.6668C14.1667 11.8969 13.9801 12.0835 13.75 12.0835C13.5199 12.0835 13.3333 11.8969 13.3333 11.6668C13.3333 11.4367 13.5199 11.2501 13.75 11.2501C13.9801 11.2501 14.1667 11.4367 14.1667 11.6668Z"
                        stroke="#36434D"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                    <span>{{ $t("btnText.continue_pay") }}</span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <Skeleton height="30px" block v-for="i in 8" :key="i"></Skeleton>
          </div>
        </template>
      </div>
    </div>
    <div class="mobile-data">
      <div class="mobile-task-list" v-if="courseSubmitList">
        <div
          class="mobile-task-item"
          v-for="item in courseSubmitList"
          :key="item.id"
        >
          <div class="task-header">
            <div class="title">
              {{ item.course_title }}
            </div>
            <div class="status">
              <span
                :class="
                  item.status == '1'
                    ? 'pre-pay'
                    : item.status == '2'
                    ? 'payed'
                    : item.status == '4'
                    ? 'complete'
                    : 'pre-pay'
                "
                >{{ item.status_title }}</span
              >
            </div>
          </div>
          <div class="detail">
            <div class="order_no">
              <div class="label">{{ $t("table.profile_apply.col_2") }}</div>
              <div class="value">{{ item.order_number }}</div>
            </div>
            <div class="receiver">
              <div class="label">{{ $t("table.profile_apply.col_5") }}</div>
              <div class="value">{{ item.last_name +' '+ item.first_name }}</div>
            </div>
            <div class="publish_time">
              <div class="label">{{ $t("table.profile_apply.col_4") }}</div>
              <div class="value">{{ item.create_time }}</div>
            </div>
          </div>
          <div class="divider-line"></div>
          <div class="footer">
            <div class="btn" @click="showCourseSubmitItemView(item.id)">
              <svg
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M11.6668 1.89136V5.33348C11.6668 5.80018 11.6668 6.03354 11.7577 6.2118C11.8376 6.3686 11.965 6.49608 12.1218 6.57598C12.3001 6.66681 12.5335 6.66681 13.0002 6.66681H16.4423M11.6668 14.1667H6.66683M13.3335 10.8334H6.66683M16.6668 8.3236V14.3334C16.6668 15.7335 16.6668 16.4336 16.3943 16.9684C16.1547 17.4388 15.7722 17.8212 15.3018 18.0609C14.767 18.3334 14.067 18.3334 12.6668 18.3334H7.3335C5.93336 18.3334 5.2333 18.3334 4.69852 18.0609C4.22811 17.8212 3.84566 17.4388 3.60598 16.9684C3.3335 16.4336 3.3335 15.7335 3.3335 14.3334V5.66675C3.3335 4.26662 3.3335 3.56655 3.60598 3.03177C3.84566 2.56137 4.22811 2.17892 4.69852 1.93923C5.2333 1.66675 5.93336 1.66675 7.3335 1.66675H10.01C10.6215 1.66675 10.9272 1.66675 11.2149 1.73582C11.47 1.79707 11.7139 1.89808 11.9375 2.03515C12.1898 2.18975 12.406 2.40594 12.8384 2.83832L15.4953 5.49517C15.9276 5.92755 16.1438 6.14374 16.2984 6.39604C16.4355 6.61972 16.5365 6.86358 16.5978 7.11867C16.6668 7.40639 16.6668 7.71213 16.6668 8.3236Z"
                  stroke="#36434D"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <span>{{ $t("btnText.detail") }}</span>
            </div>
            <span class="split" v-if="item.status_title === '待支付'">|</span>
            <div class="btn" v-if="item.status_title === '待支付'">
              <svg
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M13.75 11.6668H13.7583M2.5 4.16679V15.8335C2.5 16.7539 3.24619 17.5001 4.16667 17.5001H15.8333C16.7538 17.5001 17.5 16.7539 17.5 15.8335V7.50012C17.5 6.57965 16.7538 5.83346 15.8333 5.83346L4.16667 5.83346C3.24619 5.83346 2.5 5.08726 2.5 4.16679ZM2.5 4.16679C2.5 3.24631 3.24619 2.50012 4.16667 2.50012H14.1667M14.1667 11.6668C14.1667 11.8969 13.9801 12.0835 13.75 12.0835C13.5199 12.0835 13.3333 11.8969 13.3333 11.6668C13.3333 11.4367 13.5199 11.2501 13.75 11.2501C13.9801 11.2501 14.1667 11.4367 14.1667 11.6668Z"
                  stroke="#36434D"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <span>{{ $t("btnText.continue_pay") }}</span>
            </div>
          </div>
        </div>
      </div>
      <template v-else>
        <div class="mobile-skeleton">
          <div class="mobile-skeleton-inner">
            <div class="mobile_inner" v-for="i in 4" :key="i">
              <Skeleton width="40%" mobile></Skeleton>
              <Skeleton :rows="2" mobile></Skeleton>
              <div class="footer_btns">
                <Skeleton width="100%" mobile></Skeleton>
                <Skeleton width="100%" mobile></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <a-modal
      :title="$t('dialog.profile_apply.title')"
      v-model:open="modalVisible"
      :footer="null"
      width="41.6667vw"
    >
      <div class="detail-list" v-if="detailData">
        <div class="detail-item">
          <div class="label">{{ $t("table.profile_apply.col_3") }}</div>
          <div class="content">{{ detailData.course_title }}</div>
        </div>
        <div class="detail-item">
          <div class="label">{{ $t("table.profile_apply.col_5") }}</div>
          <div class="content">
            {{ detailData.last_name +' '+detailData.first_name }}
          </div>
        </div>
        <div class="detail-item">
          <div class="label">{{ $t("table.profile_apply.col_2") }}</div>
          <div class="content">{{ detailData.order_number }}</div>
        </div>
        <div class="detail-item">
          <div class="label">{{ $t("table.profile_apply.col_4") }}</div>
          <div class="content">{{ detailData.create_time }}</div>
        </div>
        <div class="detail-item">
          <div class="label">{{ $t("table.profile_apply.col_6") }}</div>
          <div class="content">
            <span class="payed" v-if="detailData.status_title === '已支付'">{{
              $t("tag.payed")
            }}</span>
            <span class="pre-pay" v-else>{{ $t("tag.pre_pay") }}</span>
          </div>
        </div>
        <div
          class="detail-item"
          v-if="
            detailData.CourseSubmitList &&
            detailData.CourseSubmitList.length > 0
          "
        >
          <div class="label">{{ $t("label.course_outline") }}</div>
          <div class="content table">
            <div style="border: 1px solid #e6edf2; border-bottom: none">
              <template
                v-for="(item, index) in detailData.CourseSubmitList"
                :key="item.list_id"
              >
                <div
                  class="table-header cell"
                  :style="{
                    background: index % 2 == 0 ? '#f5f9fa' : '#fff',
                  }"
                >
                  {{ item.list_title }}
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue";
import { postCourseSubmit, postCourseSubmitView } from "../../../api/aviation";
import type { CourseSubmitItem } from "../../../types/aviation";
import type { PageResult } from "../../../types/global";
import { inject } from "vue";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const modalVisible = ref(false);
// 定义nav
const activeNavIndex = ref(0);
const navList = ref([
  {
    id: 2,
    title: "已支付",
  },
  {
    id: 1,
    title: "待支付",
  },
]);

const setNavList = () => {
  navList.value[0].title = $t("content.profile.apply.navList.label_1");
  navList.value[1].title = $t("content.profile.apply.navList.label_2");
  nextTick(() => {
    initParentMobileNavWidth()
  })
};

onMounted(()=> {
  window.addEventListener('resize',initParentMobileNavWidth)
})
onBeforeUnmount(()=> {
  window.removeEventListener('resize',initParentMobileNavWidth)
})

const childMobileNavRef = ref()
const childMobileNavWidth = inject('childMobileNavWidth')
const initParentMobileNavWidth = () => {
  if(!childMobileNavRef.value) return
  childMobileNavWidth.value = childMobileNavRef.value.offsetWidth.toFixed(2) * 1
}


const mobileNavVisible = ref(false);
const onclickNavItem = (index: number) => {
  if (isMobile()) {
    mobileNavVisible.value = false;
  }
  activeNavIndex.value = index;
  filterData();
};
const filterData = () => {
  let data = courseSubmitListTemp.value?.data.filter(
    (item: CourseSubmitItem) =>
      item.status == navList.value[activeNavIndex.value].id
  );
  courseSubmitList.value = data;
};
const courseSubmitListTemp = ref<PageResult<CourseSubmitItem[]> | undefined>();
const courseSubmitList = ref<CourseSubmitItem[] | string[]>();

const postCourseSubmitList = async () => {
  let res = await postCourseSubmit();
  if (res.code === 200) {
    courseSubmitListTemp.value = res.data;
    filterData();
  }
};

const detailData = ref();
const showCourseSubmitItemView = async (id: number) => {
  if (isMobile()) {
    goto("/mobile_detail/apply", { id });
    return;
  }
  if (detailData.value?.id == id) {
    modalVisible.value = true;
    return;
  }
  let res = await postCourseSubmitView(id);
  if (res.code == 200) {
    detailData.value = res.data;
    modalVisible.value = true;
  }
};
onMounted(() => {
  setNavList();
});
onBeforeMount(() => {
  postCourseSubmitList();
  window.addEventListener("click", () => {
    if (isMobile()) {
      mobileNavVisible.value = false;
    }
  });
});
</script>
<style scoped lang="less">
@import url("./common.less");
.pc-skeleton {
  display: flex;
  flex-direction: column;
  & > div {
    margin-top: 30px;
  }
}
.mobile-skeleton {
  .mobile-skeleton-inner {
    display: flex;
    flex-direction: column;
    gap: 123px;
  }
  .mobile_inner {
    display: flex;
    flex-direction: column;
    gap: 61px;
    .footer_btns {
      display: flex;
      gap: 61px;
    }
  }
}

.mobile-data,
.mobile-nav {
  display: none;
}

.detail-list {
  .detail-item {
    margin-top: 30px;
    .label {
      margin-bottom: 15px;
      position: relative;
      padding-left: 10px;
      font-size: 20px;
      color: #172026;
      font-weight: 500;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: #172026;
      }
    }
    .content {
      font-size: 15px;
      color: #36434d;
      span {
        width: 69px;
        height: 32px;
        border-radius: 8px 8px 8px 8px;
        font-size: 16px;
        padding: 5px 11px;
        &.pre-pay {
          color: #ff4060;
          background: rgba(255, 64, 96, 0.1);
        }
        &.payed {
          color: #36d96c;
          background: rgba(54, 217, 108, 0.1);
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .pc-data,
  .pc-nav {
    display: none;
  }
  .mobile-data,
  .mobile-nav {
    display: block;
  }
}
</style>
